/*------------------------------------------------------------------
* Bootstrap Simple Admin Template
* Version: 3.9
* Author: Alexis Luna
* Website: https://github.com/pro-dev-ph/bootstrap-simple-admin-template
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

1. Body / #body
2. Contents / #auth-content
3. Cards / .card
4. Miscellaneous
5. BG Colors
6. Buttons
7. Forms
8. Adjustments to dafault behaviors
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[1. Body / #body]
*/
body {
    background: #f1f1f1;
}

.wrapper {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    min-width: 100%;
    min-height: 100vh;
}

/*------------------------------------------------------------------
[2. Contents / #auth-content]
*/
.auth-content {
    position: relative;
    width: 480px;
    padding: 15px;
    z-index: 5;
}

/*------------------------------------------------------------------
[3. Cards / .card]
*/
.auth-content .card {
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .04);
    border: 1px solid #eaedf1;
    border-radius: 5.2px;
    overflow: hidden;
}

.auth-content .card .card-block,
.auth-content .card .card-body {
    padding: 30px 25px;
}

/*------------------------------------------------------------------
[4. Miscellaneous]
*/
.shadow-2 {
    -webkit-box-shadow: 0 10px 18px 0 rgba(62, 57, 107, 0.2);
    box-shadow: 0 10px 18px 0 rgba(62, 57, 107, 0.2);
}

p.text-muted {
    font-size: 13px;
}

/*------------------------------------------------------------------
[5. BG Colors]
*/
.bg-primary {
    background-color: #1e84c4 !important;
}

.bg-success {
    background-color: #1bb394 !important;
}

.bg-secondary {
    background-color: #5d7186 !important;
}

.bg-info {
    background-color: #23c6c8 !important;
}

.bg-warning {
    background-color: #f8ac59 !important;
}

.bg-danger {
    background-color: #ed5565 !important;
}

.bg-dark {
    background-color: #323a46 !important;
}

.bg-light {
    background-color: #f6f8fb !important;
}

/*------------------------------------------------------------------
[6. Buttons]
*/
.btn-primary {
    background-color: #1e84c4;
    border-color: #1e84c4;
}

.btn-primary:hover {
    background-color: #1b77b0;
    border-color: #1b77b0;
}

.btn-primary:active {
    background-color: #186a9d !important;
    border-color: #176393 !important;
}

.btn-success {
    background-color: #1bb394;
    border-color: #1bb394;
}

.btn-success:hover {
    background-color: #18a185;
    border-color: #18a185;
}

.btn-success:active {
    background-color: #168f76 !important;
    border-color: #14866f !important;
}

.btn-secondary {
    background-color: #5d7186;
    border-color: #5d7186;
}

.btn-secondary:hover {
    background-color: #546679;
    border-color: #546679;
}

.btn-secondary:active {
    background-color: #4a5a6b !important;
    border-color: #465565 !important;
}

.btn-info {
    background-color: #23c6c8;
    border-color: #23c6c8;
}

.btn-info:hover {
    background-color: #20b2b4;
    border-color: #20b2b4;
}

.btn-info:active {
    background-color: #1c9ea0 !important;
    border-color: #1a9596 !important;
}

.btn-warning {
    background-color: #f8ac59;
    border-color: #f8ac59;
}

.btn-warning:hover {
    background-color: #df9b50;
    border-color: #df9b50;
}

.btn-warning:active {
    background-color: #c68a47 !important;
    border-color: #ba8143 !important;
}

.btn-danger {
    background-color: #ed5565;
    border-color: #ed5565;
}

.btn-danger:hover {
    background-color: #d54d5b;
    border-color: #d54d5b;
}

.btn-danger:active {
    background-color: #be4451 !important;
    border-color: #b2404c !important;
}

.btn-dark {
    background-color: #323a46;
    border-color: #323a46;
}

.btn-dark:hover {
    background-color: #474e59;
    border-color: #474e59;
}

.btn-dark:active {
    background-color: #5b616b !important;
    border-color: #474e59 !important;
}

.btn-light {
    background-color: #eef2f7;
    border-color: #eef2f7;
}

.btn-light:hover {
    background-color: #d6dade;
    border-color: #d6dade;
}

.btn-light:active {
    color: #ffffff !important;
    background-color: #bec2c6 !important;
    border-color: #b3b6b9 !important;
}

.btn-outline-primary {
    color: #1e84c4;
    border-color: #1e84c4;
}

.btn-outline-primary:hover {
    color: #ffffff !important;
    background-color: #1e84c4;
    border-color: #1e84c4;
}

.btn-outline-primary:active {
    background-color: #1e84c4 !important;
    border-color: #1e84c4 !important;
}

.btn-outline-secondary {
    color: #5d7186;
    border-color: #5d7186;
}

.btn-outline-secondary:hover {
    color: #ffffff;
    background-color: #5d7186;
    border-color: #5d7186;
}

.btn-outline-secondary:active {
    background-color: #5d7186 !important;
    border-color: #5d7186 !important;
}

.btn-outline-success {
    color: #1bb394;
    border-color: #1bb394;
}

.btn-outline-success:hover {
    color: #ffffff;
    background-color: #1bb394;
    border-color: #1bb394;
}

.btn-outline-success:active {
    background-color: #1bb394 !important;
    border-color: #1bb394 !important;
}

.btn-outline-info {
    color: #23c6c8;
    border-color: #23c6c8;
}

.btn-outline-info:hover {
    color: #ffffff;
    background-color: #23c6c8;
    border-color: #23c6c8;
}

.btn-outline-info:active {
    color: #ffffff !important;
    background-color: #23c6c8 !important;
    border-color: #23c6c8 !important;
}

.btn-outline-warning {
    color: #f8ac59;
    border-color: #f8ac59;
}

.btn-outline-warning:hover {
    color: #ffffff;
    background-color: #f8ac59;
    border-color: #f8ac59;
}

.btn-outline-warning:active {
    color: #ffffff !important;
    background-color: #f8ac59 !important;
    border-color: #f8ac59 !important;
}

.btn-outline-danger {
    color: #ed5565;
    border-color: #ed5565;
}

.btn-outline-danger:hover {
    color: #ffffff;
    background-color: #ed5565;
    border-color: #ed5565;
}

.btn-outline-danger:active {
    color: #ffffff !important;
    background-color: #ed5565 !important;
    border-color: #ed5565 !important;
}

.btn-outline-dark {
    color: #323a46;
    background-color: rgba(0, 0, 0, 0);
    border-color: #323a46;
}

.btn-outline-dark:hover {
    color: #ffffff;
    background-color: #323a46;
    border-color: #323a46;
}

.btn-outline-dark:active {
    color: #ffffff !important;
    background-color: #323a46 !important;
    border-color: #323a46 !important;
}

.btn-outline-light {
    color: black;
    background-color: rgba(0, 0, 0, 0);
    border-color: #d6dade;
}

.btn-outline-light:hover {
    color: black;
    background-color: #d6dade;
    border-color: #d6dade;
}

.btn-outline-light:active {
    color: black !important;
    background-color: #d6dade !important;
    border-color: #d6dade !important;
}

/*------------------------------------------------------------------
[7. Forms]
*/
.form-control,
.form-select {
    border-radius: 3px;
    border: 2px solid #E0E0E0;
    background-color: #FAFAFA !important;
    box-shadow: none !important;
}

.form-check .form-check-input {
    border: 2px solid #d2d6de;
}

.form-control:focus,
.form-select:focus, {
    box-shadow: none !important;
    border: 2px solid #1e84c4;
    background-color: #FAFAFA;
}

.form-check-input:focus {
    box-shadow: none !important;
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid,
.was-validated .form-control:invalid {
    border-color: #ed5565;
}

/*------------------------------------------------------------------
[8. Adjustments to dafault behaviors]
*/
.btn {
    padding: 10px 20px;
    border-radius: 0.25rem;
    font-size: 14px;
    margin-bottom: 5px;
    margin-right: 10px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.wrapper a,
.wrapper p>a {
    color: #3e8ef7;
    font-weight: 600;
}

.brand {
    width: 320px;
    height: auto; /* Keeps aspect ratio */
}